<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			电卡管理
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonetap">
					<view class="stapone">
						<view class="staponeleft">{{list.projectName}}</view>
						<view class="staponeright" @click="xgbtn">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//xiugai.png"></image>
						</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户姓名:{{list.realName}}</view>
						<view class="staptworight">基本账户:{{list.realBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">用户编号:{{list.id}}</view>
						<view class="staptworight">赠送账户:{{list.dummyBalance}} 元</view>
					</view>
					<view class="staptwo">
						<view class="staptwoleft">包月期限：<span v-if="list.endTime">{{list.endTime}}</span>
							<span v-else>无</span>
						</view>
						<view class="staptworight"
							v-show="list.monthlyType=='A1'||list.monthlyType=='A3'||list.monthlyType=='A4'||list.monthlyType=='A6'">
							剩余：
							<span v-if="list.monthlyType=='A1'||list.monthlyType=='A4'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A3'||list.monthlyType=='A6'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
						<view class="staptworight" v-show="list.monthlyType=='A5'||list.monthlyType=='A7'">剩余：
							<span v-if="list.monthlyType=='A5'">{{list.num}}小时</span>
							<span v-else-if="list.monthlyType=='A7'">{{list.num}}次</span>
							<span v-else>0</span>
						</view>
					</view>
				</view>
			</view>
			<view class="bdshows">
				<view class="sone" v-show="bdshow==1">
					<view class="soneleft">
						{{showlist.card_id}}
					</view>
					<view class="soneright" @click="jbbtn(showlist.card_id)">
						解绑
					</view>
				</view>
				<view class="stwo" v-show="tapshow==true">
					<view class="stwoleft">
						<input placeholder="请输入电卡号" v-model="dknum" type="number" />
					</view>
					<view class="stworight" @click="bangbtn">
						确认绑定
					</view>
				</view>
				<view class="sthree" @click="tapbtn" v-show="bdshow==2">
					添加电卡
				</view>
				<view class="sfour" v-show="bdshow==2">
					当前暂无电卡点击添加电卡立即绑定，最多可绑定1张
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {},
		mounted() {

		},

		data() {
			return {
				tapshow: false,
				showlist: {}, //用户绑定电卡列表
				bdshow: 1, //1代表解绑显示，2表示绑定显示
				dknum: '', //电卡号
				id: '', //用户ID
				list: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.show();
		},
		onShow() {
			this.usershow()
		},
		methods: {
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},
			//获取用户信息
			usershow() {
				this.$base.request('user/info' + '/' + this.id, 'GET')
					.then(res => {
						this.list = res.data.data
						this.list.id = this.pad(this.list.id, 8)
					})
					.catch(err => {

					})
			},
			//获取用户绑定电卡列表
			show() {

				let data = {
					userId: this.id
				}
				this.$base.request('electricCard/list', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							if (res.data.data[0]) {
								this.showlist = res.data.data[0]
								this.bdshow = 1
							} else {
								this.showlist = {}
								this.bdshow = 2
							}
						} else {
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {

					})
			},
			//解绑电卡
			jbbtn(e) {
				Dialog.confirm({
					title: '提示',
					message: '确认删除？'
				}).then(() => {
					let data = {
						userId: this.id,
						cardNo: e,
						type: 1
					}
					this.$base.request('electricCard', 'PUT', data)
						.then(res => {
							if (res.data.code == 200) {
								this.$toast.success('解绑成功')
								this.bdshow = 2
							} else {
								this.$toast.fail(res.data.msg)
								this.bdshow = 1
							}
						})
						.catch(err => {

						})
				}).catch(() => {
					// on cancel
				});

			},
			//绑定电卡
			bangbtn(e) {
				var reg = /.*\..*/;
				if (reg.test(this.dknum)) {
					this.$toast.fail('电卡号输入不正确')
					return
				}
				if (this.dknum.length != 10) {
					this.$toast.fail('请输入10位电卡号')
					return
				}
				let data = {
					userId: this.id,
					cardNo: this.dknum,
					type: 0
				}
				this.$base.request('electricCard', 'PUT', data)
					.then(res => {
						if (res.data.code == 200) {
							this.show();
							this.tapshow = false
							this.dknum = ""
							this.$toast.success('绑定成功')
						} else {
							this.$toast.fail(res.data.msg)
							this.bdshow = 2
						}
					})
					.catch(err => {

					})
			},
			//显示添加电卡
			tapbtn() {
				this.tapshow = true
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//跳转修改页面
			xgbtn() {
				uni.navigateTo({
					url: '/pages/modify_user_information/modify_user_information?id=' + this.id + '&realName=' +
						this.list.realName +
						'&phone=' + this.list.phone,
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;

		.hand {
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;

			image {
				width: 22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}

		.show {
			width: 100%;
			box-sizing: border-box;

			.sone {
				width: 100%;
				height: 164upx;
				background-color: #4B98ED;
				position: relative;
				margin-bottom: 116upx;

				.sonetap {
					width: 683upx;
					height: 219upx;
					border-radius: 16upx;
					box-shadow: -1upx 5upx 10upx 0upx rgba(22, 22, 22, 0.27);
					position: absolute;
					background-color: #FFFFFF;
					top: 43upx;
					left: 50%;
					margin-left: -341.5upx;

					.stapone {
						width: 100%;
						box-sizing: border-box;
						padding: 26upx 33upx;
						position: relative;

						.staponeleft {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 32upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
						}

						.staponeright {
							width: 101upx;
							height: 50upx;
							border-radius: 25upx 0upx 0upx 25upx;
							text-align: center;
							background-color: #4B98ED;
							position: absolute;
							bottom: 0upx;
							right: 0upx;
							box-sizing: border-box;
							padding-top: 7upx;
							padding-left: 17upx;

							image {
								width: 37upx;
								height: 36upx;
							}
						}
					}
				}

				.staptwo {
					width: 100%;
					box-sizing: border-box;
					padding-left: 27upx;
					padding-bottom: 5upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					display: flex;

					.staptwoleft {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.staptworight {
						width: 50%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.bdshows {
				width: 100%;
				margin-top: 85upx;
				margin-bottom: 41upx;

				.sone {
					display: flex;
					width: 686upx;
					height: 126upx;
					border-radius: 16upx;
					background-color: #FFFFFF;
					margin: 0 auto;
					box-sizing: border-box;
					justify-content: space-between;

					.soneleft {
						font-size: 32upx;
						font-family: Arial Bold, Arial Bold-Bold;
						font-weight: 700;
						color: #333333;
						line-height: 126upx;
						margin-left: 15upx;
					}

					.soneright {
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #999999;
						line-height: 126upx;
						margin-right: 35upx;
					}
				}

				.stwo {
					width: 686upx;
					border-radius: 16upx;
					display: flex;
					background-color: #FFFFFF;
					margin: 0 auto;
					box-sizing: border-box;
					justify-content: space-between;
					margin-top: 18upx;
					align-items: center;
					padding: 30upx 15upx;

					.stwoleft {
						input {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #999999;
						}
					}

					.stworight {
						width: 179upx;
						height: 54upx;
						border-radius: 8upx;
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #ffffff;
						text-align: center;
						line-height: 54upx;
						background-color: #4B98ED;
					}
				}

				.sthree {
					width: 686upx;
					height: 88upx;
					border-radius: 16upx;
					margin: 0 auto;
					background-color: #4B98ED;
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					line-height: 88upx;
					margin-top: 39upx;
				}

				.sfour {
					width: 100%;
					box-sizing: border-box;
					font-size: 24upx;
					font-family: PingFang SC Regular, PingFang SC Regular-Regular;
					font-weight: 400;
					color: #666666;
					padding: 37upx 35upx;
				}

			}


		}

	}
</style>
